import React, { useEffect, useState } from 'react';
import '@/views/Index/Audio/Audio.scss'
import { Select, Space, DatePicker, Input, Button, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import pic1 from '../../../assets/ycx.png'
import * as service from '../../../api/wy'
import Nav from '../../../components/Nav/Nav';
import { useNavigate } from 'react-router-dom';

interface Props {

}
interface DataType {
    key: React.Key;
    id: any;
    price: string;
    message: string;
    number: string;
    coursestatus: string;
    time: string;
    coursetype: string;
    order: number;
    pic1: string;
}

function Audio(props: Props) {
    var navigate = useNavigate()
    var [tableData, setTableData] = useState<DataType[]>([])
    // const [loading, setLoading] = useState(false);

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const { RangePicker } = DatePicker;

    //  发送获取商品列表数据 请求
    var audiolist = async () => {
        var res = await service.audiolist()
        console.log(res.data);
        setTableData(res.data);
    }
    useEffect(() => {
        audiolist();
    }, [])

    var todataaudio = ()=>{
        navigate('/index/dataaudio')
    }

    // 点击下架，发送请求，更改课程状态，页面重新渲染
    var clickdown = async (id: any, coursestatus: any) => {
        if (coursestatus == "已上架") {
            var res1 = await service.audio_down({ id: id, coursestatus: "已下架" })
            var res = await service.audiolist()
            setTableData(res.data);
        } else {
            var res1 = await service.audio_down({ id: id, coursestatus: "已上架" })
            var res = await service.audiolist()
            setTableData(res.data);
        }
    }

    // 点击删除，发送删除请求，页面重新渲染
    var clickdelete = async (id: any) => {
        var res1 = await service.audio_delete({ id: id })
        console.log(res1.data);
        var res = await service.audiolist()
        setTableData(res.data);
    }

    // 表格列的配置
    const columns: ColumnsType<DataType> = [
        {
            title: '课程信息', //表格列的标题
            dataIndex: 'message', //数据索引( 属性名 )
            key: 'message',
            width: '260px',
            className: 'tuwen',
            // ellipsis:true,
            render: (_, record) =>
                <>
                    <img src={pic1} alt="" />
                    <p>{record.message}</p>
                </>
        },
        {
            title: '课程价格（元）', //表格列的标题
            dataIndex: 'price', //数据索引( 属性名 )
            key: 'price',
            width: '130px',
            render: (_, record) => <p>{record.price}</p>,//动态渲染标签/组件
        },
        {
            title: '订阅量', //表格列的标题
            dataIndex: 'number', //数据索引( 属性名 )
            key: 'number',
            width: '80px',
            render: (_, record) => <p>{record.number}</p>,//动态渲染标签/组件
        },
        {
            title: '课程状态', //表格列的标题
            dataIndex: 'coursestatus', //数据索引( 属性名 )
            key: 'coursestatus',
            width: '90px',
            render: (_, record) => record.coursestatus == "已上架" ? <Tag color="green">{record.coursestatus}</Tag> : <Tag color="red">{record.coursestatus}</Tag>,//动态渲染标签/组件
        },
        {
            title: '课程类型', //表格列的标题
            dataIndex: 'coursetype', //数据索引( 属性名 )
            key: 'coursetype',
            width: '90px',
            render: (_, record) => <p>{record.coursetype}</p>,//动态渲染标签/组件
        },
        {
            title: '上架时间', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'time',
            width: '150px',
            render: (_, record) => <p>{record.time}</p>,//动态渲染标签/组件
        },
        {
            title: '排序号', //表格列的标题
            // dataIndex: 'isseckill', //数据索引( 属性名 )
            key: 'order',
            width: '80px',
            render: (_, record) => <p>{tableData.indexOf(record) + 1}</p>
        },
        {
            title: '操作', //表格列的标题
            // dataIndex: 'tip', //数据索引( 属性名 )
            key: 'tip',
            render: (_, record) =>
                <>
                    <a onClick={todataaudio}>数据</a >
                    <a >编辑</a >
                    <a onClick={() => { clickdown(record.id, record.coursestatus) }}>{record.coursestatus == "已上架" ? '下架' : '上架'}</a >
                    <a onClick={() => { clickdelete(record.id) }}>删除</a >
                </>

        },
    ]
    return (
        <div className='audio'>
            <Nav />
            <div className="mid">
                <div className="first">
                    <div className="status">
                        课程状态
                        <Select
                            className='select'
                            placeholder="请选择课程状态"
                            style={{ width: 200 }}
                            onChange={handleChange}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '待上架', label: '待上架' },
                                { value: '已上架', label: '已上架' },
                                { value: '已下架', label: '已下架' },
                            ]}
                        />
                    </div>
                    <div className="zhiboname">
                        <div className="text2">课程名称</div>
                        <Input className='input' placeholder="请输入" />
                    </div>
                </div>
                <div className="second">
                    <div className="date">
                        上架日期
                        <Space className='space' direction="vertical" size={12} >
                            <RangePicker />
                        </Space>
                    </div>
                    <div className="tip">
                        <span>今日</span>
                        <span>昨日</span>
                        <span>最近7天</span>
                        <span>最近30天</span>
                    </div>
                    <div className="btns">
                        <Space >
                            <Button className='btn1' type="primary">查询</Button>
                            <Button className='btn2' type="primary">重置</Button>
                        </Space>
                    </div>
                </div>
            </div>
            <div className="list">
                <div className="lineone">
                    <div className="left">课程列表</div>
                    <div className="btn">
                        <Space >
                            <Button className='btn1' type="primary">+新建</Button>
                            <Button className='btn2' type="primary">批量操作</Button>
                        </Space>
                    </div>
                </div>
                <div className="table">
                    <Table columns={columns} dataSource={tableData} />
                </div>
            </div>
        </div>
    );
}

export default Audio;